<template>
  <div class="profile-container">
    <h1>个人中心</h1>
    <div v-if="isLoggedIn" class="user-info">
      <p><strong>用户名:</strong> {{ username }}</p>
      <p><strong>邮箱:</strong> {{ email }}</p>
      <button @click="handleLogout" class="logout-btn">退出登录</button>
    </div>
    <div v-else class="not-logged-in">
      <p>请先<a href="#/login">登录</a>后查看个人信息</p>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';

const username = ref('');
const email = ref('');
const isLoggedIn = ref(false);
const router = useRouter();

onMounted(() => {
  // 检查用户是否登录
  const loggedIn = localStorage.getItem('isLoggedIn') === 'true';
  isLoggedIn.value = loggedIn;

  if (loggedIn) {
    // 获取用户信息
    username.value = localStorage.getItem('username') || '';
    email.value = localStorage.getItem('email') || '';
  }
});

const handleLogout = () => {
  // 清除登录状态
  localStorage.removeItem('isLoggedIn');
  localStorage.removeItem('username');
  localStorage.removeItem('email');
  isLoggedIn.value = false;
  // 跳转到登录页
  router.push('/login');
};
</script>

<style scoped>
.profile-container {
  max-width: 600px;
  margin: 0 auto;
  padding: 2rem;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.user-info {
  margin-top: 1.5rem;
  padding: 1rem;
  background-color: #f9f9f9;
  border-radius: 4px;
}

.user-info p {
  margin-bottom: 0.75rem;
}

.logout-btn {
  margin-top: 1rem;
  padding: 0.5rem 1rem;
  background-color: #f44336;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.logout-btn:hover {
  background-color: #d32f2f;
}

.not-logged-in {
  margin-top: 1.5rem;
  text-align: center;
}

.not-logged-in a {
  color: #42b983;
  text-decoration: none;
}

.not-logged-in a:hover {
  text-decoration: underline;
}
</style>